import React, { useState } from 'react';
import './Tab_switching.css';
// 导入图片
// 小红书的图片
import tab1 from '../../../public/Tab_switching/小红书/tab1.jpg';
import tab1_1 from '../../../public/Tab_switching/小红书/tab1-1.jpg';
import tab1_2 from '../../../public/Tab_switching/小红书/tab1-2.jpg';
import baokuan from '../../../public/Tab_switching/小红书/baokuan.jpg'
import baokuan1 from '../../../public/Tab_switching/小红书/baokuan1.jpg'
import baokuan2 from '../../../public/Tab_switching/小红书/baokuan2.jpg'
import hangye from '../../../public/Tab_switching/小红书/hangye.jpg'
import hangye1 from '../../../public/Tab_switching/小红书/hangye1.jpg'
import hangye2 from '../../../public/Tab_switching/小红书/hangye2.jpg'
import AIdazi from '../../../public/Tab_switching/小红书/AI大字封面.jpg'
import fengmian from '../../../public/Tab_switching/小红书/图文封面.jpg'
import changwen from '../../../public/Tab_switching/小红书/科普长文.jpg'
import xiaohongshu from '../../../public/Tab_switching/小红书/小红书.jpg'

// 电商图片
import tab2 from '../../../public/Tab_switching/电商/tab2.jpg';
import cuxiao from '../../../public/Tab_switching/电商/促销活动.jpg';
import dianshang from '../../../public/Tab_switching/电商/电商海报.jpg';
import AIzhutu from '../../../public/Tab_switching/电商/AI商品主图.jpg';
import zhinengshuban from '../../../public/Tab_switching/电商/智能竖版海报.jpg';
import AIwenan from '../../../public/Tab_switching/电商/AI文案助手.jpg';
import zhinenghengban from '../../../public/Tab_switching/电商/智能横版海报.jpg';

// 公众号
import gzshoutu from '../../../public/Tab_switching/公众号/公众号首图.jpg';
import gzchangtu from '../../../public/Tab_switching/公众号/文章长图.jpg';
import gzcitu from '../../../public/Tab_switching/公众号/公众号次图.jpg';
import AIgzshoutu from '../../../public/Tab_switching/公众号/AI公众号首图.jpg';
import AIgzcitu from '../../../public/Tab_switching/公众号/AI公众号次图.jpg';
import AIxiewenzhang from '../../../public/Tab_switching/公众号/AI写文章.jpg';
import AIxiebiaoti from '../../../public/Tab_switching/公众号/AI写标题.jpg';

// 教育培训
import jiangshijieshao from '../../../public/Tab_switching/教育培训/讲师介绍.jpg';
import kechengyingxiao from '../../../public/Tab_switching/教育培训/课程营销.jpg';
import zhaoshengyinliu from '../../../public/Tab_switching/教育培训/招生引流.jpg';
import AIjiaopeiwenan from '../../../public/Tab_switching/教育培训/AI教培文案.jpg';
import AIkepuchangwen from '../../../public/Tab_switching/教育培训/AI科普长文.jpg';
import AIjiangshibaozhuang from '../../../public/Tab_switching/教育培训/AI讲师包装.jpg';
import AIdazihaibao from '../../../public/Tab_switching/教育培训/AI大字海报.jpg';

// 零售
import meirongmeizhuang from '../../../public/Tab_switching/零售/美容美妆.jpg';
import fsxb from '../../../public/Tab_switching/零售/服饰箱包.jpg';
import myqz from '../../../public/Tab_switching/零售/母婴亲子.jpg';
import AIdzhb from '../../../public/Tab_switching/零售/AI大字海报.jpg';
import znspzt from '../../../public/Tab_switching/零售/智能商品主图.jpg';
import zxkt from '../../../public/Tab_switching/零售/在线抠图.jpg';
import znsbhb from '../../../public/Tab_switching/零售/智能竖版海报.jpg';

// 生活日常
import shaitu from '../../../public/Tab_switching/生活日常/晒图晒照.jpg';
import bizhi from '../../../public/Tab_switching/生活日常/手机壁纸.jpg';
import shouzhang from '../../../public/Tab_switching/生活日常/手帐计划.jpg';
import pintu from '../../../public/Tab_switching/生活日常/拼图PLOG.jpg';
import shipin from '../../../public/Tab_switching/生活日常/视频剪辑.jpg';
import tupian from '../../../public/Tab_switching/生活日常/图片美化.jpg';
import AIrenwu from '../../../public/Tab_switching/生活日常/AI人物头像.jpg';

// 行政办公
import qiuzhizhaopin from '../../../public/Tab_switching/行政办公/求职招聘.jpg';
import tongzhigonggao from '../../../public/Tab_switching/行政办公/通知公告.jpg';
import huibaoPPT from '../../../public/Tab_switching/行政办公/汇报PPT.jpg';
import dazigonggao from '../../../public/Tab_switching/行政办公/智能大字公告.jpg';
import changwentongzhi from '../../../public/Tab_switching/行政办公/智能长文通知.jpg';
import shengchengyaoqing from '../../../public/Tab_switching/行政办公/智能生成邀请.jpg';
import shengchengxibao from '../../../public/Tab_switching/行政办公/智能生成喜报.jpg';
const tabs = [
    // 小红书
    {
        id: 1,
        title: '小红书',
        content: (
            <div className="image-stack">
                <img src={tab1} className="overlay-image" style={{ borderRadius: '7px' }} alt="小红书" />
                <img src={tab1_1} className="overlay-image" alt="tab1-1" />
                <img src={tab1_2} className="overlay-image" alt="tab1-2" />
            </div>
        ),
        content1: (
            <div className="image-stack1">
                <img src={baokuan} className="overlay-image1" alt="小红书" />
                <img src={baokuan1} className="overlay-image2" alt="tab1-1" />
                <img src={baokuan2} className="overlay-image3" alt="tab1-2" />
                <div className='div1-image1'></div>
                <img src={hangye} className="overlay-image4" alt="小红书" />
                <img src={hangye1} className="overlay-image5" alt="tab1-1" />
                <img src={hangye2} className="overlay-image6" alt="tab1-2" />
            </div>
        ),
        content2: (
            <div className="image-stack2">
                <span>AI大字封面</span>
                <img src={AIdazi} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content3: (
            <div className="image-stack3">
                <span>AI科普长文</span>
                <img src={changwen} className="overlay-image1" alt="AI科普长文" />
            </div>
        ),
        content4: (
            <div className="image-stack4">
                <div className='div1-stack4'>
                    <span>AI图文封面</span>
                    <img src={fengmian} className="overlay-image1" alt="AI打字页面" />
                </div>
                <div className='div1-stack5'>
                    <span>进入小红书场景 &gt;</span>
                    <img src={xiaohongshu} className="overlay-image1" alt="AI打字页面" />
                </div>
            </div>
        ),
    },
    // 电商
    {
        id: 2,
        title: '电商',
        content: (
            <div className="online_retailers">
                <img src={tab2} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>商品主图</span>
                </div>
            </div>
        ),
        content1: (
            <div className="online_retailers1">
                <img src={cuxiao} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>促销活动</span>
                </div>
            </div>
        ),
        content2: (
            <div className="online_retailers2">
                <img src={dianshang} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>电商海报</span>
                </div>
            </div>
        ),
        content3: (
            <div className="online_retailers3">
                <span>AI商品主图</span>
                <img src={AIzhutu} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content4: (
            <div className="online_retailers4">
                <span>智能竖版海报</span>
                <img src={zhinengshuban} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content5: (
            <div className="online_retailers5">
                <span>AI文案助手</span>
                <img src={AIwenan} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content6: (
            <div className="online_retailers6">
                <div className='div1-stack4'>
                    <span>智能横版海报</span>
                    <img src={zhinenghengban} className="overlay-image1" alt="AI打字页面" />
                </div>
                <div className='div1-stack5'>
                    <span>进入电商场景 &gt;</span>
                </div>
            </div>
        ),
    },
    // 公众号
    {
        id: 3,
        title: '公众号',
        content: (
            <div className="official_account">
                <img src={gzshoutu} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>公众号首图</span>
                </div>
            </div>
        ),
        content1: (
            <div className="online_retailers1">
                <img src={gzchangtu} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>文章长图</span>
                </div>
            </div>
        ),
        content2: (
            <div className="official_account2">
                <img src={gzcitu} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>公众号次图</span>
                </div>
            </div>
        ),
        content3: (
            <div className="online_retailers3">
                <span>AI公众号首图</span>
                <img src={AIgzshoutu} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content4: (
            <div className="online_retailers4">
                <span>AI公众号次图</span>
                <img src={AIgzcitu} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content5: (
            <div className="online_retailers5">
                <span>AI写文章</span>
                <img src={AIxiewenzhang} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content6: (
            <div className="online_retailers6">
                <div className='div1-stack4'>
                    <span>AI写标题</span>
                    <img src={AIxiebiaoti} className="overlay-image1" alt="AI打字页面" />
                </div>
                <div className='div1-stack5'>
                    <span>进入公众号场景 &gt;</span>
                </div>
            </div>
        ),
    },
    // 教育培训
    {
        id: 4,
        title: '教室培训',
        content: (
            <div className="Education">
                <img src={jiangshijieshao} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>讲师介绍</span>
                </div>
            </div>
        ),
        content1: (
            <div className="Education1">
                <img src={kechengyingxiao} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>课程营销</span>
                </div>
            </div>
        ),
        content2: (
            <div className="Education2">
                <img src={zhaoshengyinliu} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>招生引流</span>
                </div>
            </div>
        ),
        content3: (
            <div className="online_retailers3">
                <span>AI教培文案</span>
                <img src={AIjiaopeiwenan} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content4: (
            <div className="online_retailers4">
                <span>AI科普长文</span>
                <img src={AIkepuchangwen} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content5: (
            <div className="online_retailers5">
                <span>AI讲师包装</span>
                <img src={AIjiangshibaozhuang} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content6: (
            <div className="online_retailers6">
                <div className='div1-stack4'>
                    <span>AI大字海报</span>
                    <img src={AIdazihaibao} className="overlay-image1" alt="AI打字页面" />
                </div>
                <div className='stack5'>
                    <span>进入教育培训场景 &gt;</span>
                </div>
            </div>
        ),
    },
    // 零售
    {
        id: 5,
        title: '零售',
        content: (
            <div className="Education">
                <img src={meirongmeizhuang} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>美容美妆</span>
                </div>
            </div>
        ),
        content1: (
            <div className="retail">
                <img src={fsxb} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>服饰箱包</span>
                </div>
            </div>
        ),
        content2: (
            <div className="Education2">
                <img src={myqz} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>母婴亲子</span>
                </div>
            </div>
        ),
        content3: (
            <div className="online_retailers3">
                <span>AI大字海报</span>
                <img src={AIdzhb} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content4: (
            <div className="online_retailers4">
                <span>智能商品主图</span>
                <img src={znspzt} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content5: (
            <div className="online_retailers5">
                <span>在线抠图</span>
                <img src={zxkt} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content6: (
            <div className="online_retailers6">
                <div className='div1-stack4'>
                    <span>智能竖版海报</span>
                    <img src={znsbhb} className="overlay-image1" alt="AI打字页面" />
                </div>
                <div className='div1-stack5'>
                    <span>进入零售场景 &gt;</span>
                </div>
            </div>
        ),
    },
    // 生活日常
    {
        id: 6,
        title: '生活日常',
        content: (
            <div className="Education">
                <img src={shaitu} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>晒图晒照</span>
                </div>
            </div>
        ),
        content1: (
            <div className="retail">
                <img src={bizhi} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>手机壁纸</span>
                </div>
            </div>
        ),
        content2: (
            <div className="Education2">
                <img src={shouzhang} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>手帐计划</span>
                </div>
            </div>
        ),
        content3: (
            <div className="online_retailers3">
                <span>拼图PLOG</span>
                <img src={pintu} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content4: (
            <div className="online_retailers4">
                <span>视频剪辑</span>
                <img src={shipin} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content5: (
            <div className="online_retailers5">
                <span>图片美化</span>
                <img src={tupian} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content6: (
            <div className="online_retailers6">
                <div className='div1-stack4'>
                    <span>AI任务头像</span>
                    <img src={AIrenwu} className="overlay-image1" alt="AI打字页面" />
                </div>
                <div className='stack5'>
                    <span>进入生活日常场景 &gt;</span>
                </div>
            </div>
        ),
    },
    // 行政办公
    {
        id: 7,
        title: '行政办公',
        content: (
            <div className="Education">
                <img src={qiuzhizhaopin} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>求职招聘</span>
                </div>
            </div>
        ),
        content1: (
            <div className="retail">
                <img src={tongzhigonggao} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>通知公告</span>
                </div>
            </div>
        ),
        content2: (
            <div className="Education2">
                <img src={huibaoPPT} className="overlay-image" style={{ borderRadius: '5px' }} alt="电商" />
                <div className='online-div1'>
                    <span>汇报PPT</span>
                </div>
            </div>
        ),
        content3: (
            <div className="online_retailers3">
                <span>智能大字公告</span>
                <img src={dazigonggao} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content4: (
            <div className="online_retailers4">
                <span>智能长文通知</span>
                <img src={changwentongzhi} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content5: (
            <div className="online_retailers5">
                <span>智能生成邀请函</span>
                <img src={shengchengyaoqing} className="overlay-image1" alt="AI打字页面" />
            </div>
        ),
        content6: (
            <div className="online_retailers6">
                <div className='div1-stack4'>
                    <span>智能生成喜报</span>
                    <img src={shengchengxibao} className="overlay-image1" alt="AI打字页面" />
                </div>
                <div className='stack5'>
                    <span>进入行政办公场景 &gt;</span>
                </div>
            </div>
        ),
    },
];

const TabComponent = () => {
    const [activeTab, setActiveTab] = useState(tabs[0].id);

    const handleTabClick = (id: number) => {
        setActiveTab(id);
    };

    return (
        <div className="tabbar-container">
            <div className="tab-header">
                {tabs.map((tab) => (
                    <div
                        key={tab.id}
                        className={`tab-item ${activeTab === tab.id ? 'active' : ''}`}
                        onClick={() => handleTabClick(tab.id)}
                    >
                        {tab.title}
                    </div>
                ))}
            </div>
            <div className="tab-content">
                {tabs.find((tab) => tab.id === activeTab)?.content}
                {tabs.find((tab) => tab.id === activeTab)?.content1}
                {tabs.find((tab) => tab.id === activeTab)?.content2}
                {tabs.find((tab) => tab.id === activeTab)?.content3}
                {tabs.find((tab) => tab.id === activeTab)?.content4}
                {tabs.find((tab) => tab.id === activeTab)?.content5}
                {tabs.find((tab) => tab.id === activeTab)?.content6}
            </div>
        </div>
    );
};

export default TabComponent;